<template>
  <div class="login-container">
    <div class="login-box">
      <el-form
        :model="formData"
        ref="loginForm"
        class="login-box-form"
      >
        <el-form-item prop="username" label="用户名：">
          <el-input placeholder="请输入用户名" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item
          prop="password" label="密码：">
          &nbsp;&nbsp;&nbsp;<el-input placeholder="请输入密码" type="password" v-model="formData.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left:25%" @click="Login">登陆</el-button>
          <el-button type="info" @click="getUserList()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-footer class="login-footer">
      <div></div>
      <div>
        © 2021 boke京 ICP 证 110745 号京 ICP 备 13052560 号 - 1京公网安备 11010802010035 号出版物经营许可证互联网药品信息服务资格
        </div>
      <div>
        侵权举报网上有害信息举报专区儿童色情信息举报专区违法和不良信息举报：010-82716601
      </div>
    </el-footer>
  </div>
</template>

<script>
import {UserList} from '@/api/user/userData'
export default {
  data(){
    return{
      formData:{
        username:'admin',
        password:'123456',
      },
      imgSrc:require('../../assets/login.png')
    }
  },
  methods:{
    Login(){
      this.$router.push(
        {
          path:'/user'
        }
      )
    },
    toMessage(){
      let res =UserList()
      console.log(res)
    },
    getUserList(){
      let res=UserList()
      console.log(res.data)
    }
  }
  // created:{
  //   toMessage()
  // }
}
</script>

<style lang="scss" scoped>
$bg:#fff;
.login-container{
  height: 100vh;
  width: 100%;
  overflow: auto;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  background-size: cover;
  background-image: url('../../assets/login.png');
  display: flex;
  .login-box{
    -webkit-box-flex: 1;
    flex: 1 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 2px;
    min-height: 688px;
    height: calc(100% - 42px);
    box-sizing: border-box;

    .login-box-form{
      background-color: rgba(255, 255, 255, 0.5);
      width: 400px;
      height: 170px;
      border-color: rgba(200,200,200,0.5);
      border-radius: 10px;
      .el-form-item{
        margin-top: 10px;
        margin-left: 7%;
        margin-bottom: 0px;
      }
      .el-input{
        display: inline-block;
        height: 47px;
        width: 70%;
        
        input {
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $bg;
          height: 47px;
          caret-color: $bg;

          &:-webkit-autofill {
            box-shadow: 0 0 0px 1000px $bg inset !important;
            -webkit-text-fill-color: $bg !important;
          }
        }
      }
    }
  }
  .login-footer{
    padding-bottom: 20px;
    font-size: 12px;
    line-height: 21px;
    text-align: center;
    color: #fff;
  }
}
</style>
